<template>
	<div class="flex-1 flex flex-col">
		<activity-ad-swiper :type="AdPositionType.feed" />
		<n-tabs
			v-model:value="tab"
			size="large"
			justify-content="center"
			:bar-width="40"
			animated
			@before-leave="handleBeforeLeave"
			@update:value="onChange">
			<n-tab name="recommend" :tab="$t('feed.recommend')"></n-tab>
			<n-tab name="follow" :tab="$t('feed.follow')"></n-tab>
		</n-tabs>
		<router-view class="mt-3"></router-view>
	</div>
</template>
<script lang="ts" setup>
import { NTabs, NTab } from 'naive-ui'
import { ActivityAdSwiper } from '@/components/activity'
import { AdPositionType } from '@/enums'
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAccountStore } from '@/store'

const route = useRoute()
const router = useRouter()

const accountStore = useAccountStore()

const tab = ref('')

const onChange = (val: string) => {
	if (val === 'recommend') {
		router.push('/feed')
	} else {
		router.push('/feed-follow')
	}
}

const handleBeforeLeave = () => {
	if (tab.value === 'recommend' && !accountStore.isLogin) {
		accountStore.showLogin()
		return false
	}
	return true
}

watch(
	() => route.path,
	() => {
		tab.value = route.path === '/feed' ? 'recommend' : 'follow'
	},
	{ immediate: true }
)
</script>
